<template>
  <div class="login">
    <!-- <div
      class="bg"
      style="position: absolute; width: 100%; height: 100%; z-index: -1"
    >
      <img
        src="http://pay.inheart.cn/images/bg.jpg"
        height="100%"
        width="100%"
      />
    </div> -->
    <div class="left-wrap">
      <div class="left-top">
        <h1>用心自助支付系统全新上线</h1>
        <p>自动提货支付、全新操作体验</p>
      </div>
      <div class="left-bottom">
        <img src="http://pay.inheart.cn/images/login_01.png" />
      </div>
    </div>
    <div class="right-wrap">
      <div class="right-top">欢迎登录 <h3>用心自助支付系统</h3>
      </div>
      <div class="login-wrap">
        <p class="Scancode">扫码登录</p>
        <div class="wechatQrCode">
          <el-image
            :src="loginurl"
            v-if="islogin == 0"
            width="230"
          ></el-image>
          <el-result
            icon="success"
            title="扫码成功"
            v-else-if="islogin == 1"
            subTitle="等待手机确认操作"
          >
            <template slot="extra">
              <el-button type="primary" size="medium" @click="resetQrcode">刷新二维码</el-button>
            </template>
          </el-result>

          <el-result
            icon="warning"
            :title="msg"
            v-else-if="islogin == 2"
            subTitle="请刷新二维码重新扫码"
          >
            <template slot="extra">
              <el-button type="primary" @click="resetQrcode" size="medium">刷新二维码</el-button>
            </template>
          </el-result>
          <p v-if="islogin == 0">微信扫码登录</p>
        </div>
      </div>
    </div>

    <div class="login_bottom">
      <div class="login_bottomtitle">
        <img src="http://www.iqp168.com/images/yxLogo.png" />用心软件出品
      </div>
      <div class="login_bottommenu">
        <a href="http://www.inheartsoft.com/" target="_blank">用心官网</a>|
        <a href="http://www.inheart.cn/" target="_blank">用心软件</a>|
        <a href="http://www.iqp168.com/yxdsadmin/#/login" target="_blank">用心电商</a>|
        <a href="http://yxsopj.com/" target="_blank">用心搜配件</a>|
        <a href="http://www.iqp168.com/" target="_blank">用心汽配商圈</a>|
        <a href="http://www.soqp.cn/" target="_blank">用心搜汽配SAAS</a>
      </div>
      <div class="login_bottomcontent">
        <img src="http://www.iqp168.com/images/tel.png" />
        <a href="javascript:;" class="tel">020-8705 9554</a>
        <img src="http://www.iqp168.com/images/QQ.png" />
        <a href="tencent://Message/?Uin=800819630&websiteName=q-zone.qq.com&Menu=yes">800819630</a>
      </div>
      <div class="login_bottomba">
        <a href="http://beian.miit.gov.cn" target="_blank" style="color:white">粤ICP备11083245号</a>
      </div>
    </div>
  </div>
</template>

<script>
import setting from "@/config/setting";
import { getMenuList } from "@/api/menuApi.js";
import { loginApi } from "@/api/loginApi";
import { loginqrcodeApi } from "@/api/loginApi";

export default {
  data() {
    return {
      systemName: setting.systemName,
      gscode: "A001",
      account: "",
      password: "",
      leftBg: require("@img/lf_bg.png"),
      code: "",
      loading: false,
      captcha: {
        captchaId: "",
        picPath: ""
      },
      activeName: "扫码登录",
      loginurl: "",
      islogin: 0
    };
  },
  created() {
    this.initLanguage();
    this.initQrcode();
  },
  methods: {
    // 登录
    login() {
      let { gscode, account, password } = this;
      if (!gscode) {
        this.showTips(0);
        return;
      }

      if (!account) {
        this.showTips(1);
        return;
      }

      if (!password) {
        this.showTips(2);
        return;
      }
      this.loading = true;
      loginApi({
        gscode: gscode,
        username: account,
        password: password
      }).then(res => {
        if (res.code === 0) {
          this.$store.dispatch("user/setUserInfo", res.data);
          this.$store.dispatch("user/setLoginStatus", true);
          getMenuList();

          setTimeout(() => {
            this.loading = false;
            this.$router.push("/dashboard/console");
          }, 1000);
        } else {
          this.loading = false;
          this.$message.error("登录失败，请核对账号密码");
        }
      });
    },
    initLanguage() {
      let sys = JSON.parse(localStorage.getItem("sys"));
      if (sys) {
        let { language } = sys.user;
        if (language) {
          this.$i18n.locale = language;
          this.$store.dispatch("user/setLanguage", language);
        }
      }
    },
    showTips(index) {
      this.$message.error(this.$t(`login.tips[${index}]`));
    },
    initQrcode() {
      this.isreset = false;
      this.clear_data();
      this.getQRcodeStauts();
      window.invl = setInterval(this.getQRcodeStauts, 2000);
    },
    resetQrcode() {
      this.qrcodestop();
      this.initQrcode();
    },
    getQRcodeStauts() {
      let qrcodekey = localStorage.rqrcodekey;
      loginqrcodeApi({
        qrcodeKey: qrcodekey
      }).then(res => {
        console.log(res);
        localStorage.setItem("rqrcodekey", res.qrcodekey);
        let url = window.location.href;
        let posturl = "http://192.168.0.88:688";
        if (url.indexOf("192.168.0") < 0) {
          posturl = "http://pay.inheart.cn";
        }
        let qrdata = encodeURIComponent(
          posturl + "/page/paysq.aspx?qrcode_key=" + res.qrcodekey
        );
        this.loginurl = "http://wx.inheartsoft.com/2DCode.ashx?data=" + qrdata;
        switch (res.status) {
          case "QRCODE_SCAN_NEVER":
            break;
          case "QRCODE_SCAN_ING":
            this.islogin = 1;
            break;
          case "QRCODE_SCAN_SUCC":
            if (res.code === 0) {
              this.$store.dispatch("user/setUserInfo", res.data);
              this.$store.dispatch("user/setLoginStatus", true);
              getMenuList();
              this.$router.push("/dashboard/index");
              clearInterval(window.invl);
              this.qrcodestop();
            }
            break;
          case "QRCODE_SCAN_FAIL":
            clearInterval(window.invl);
            this.qrcodestop();
            this.islogin = 2;
            this.msg = res.msg;
            break;
        }
      });
    },
    qrcodestop() {
      clearInterval(window.invl);
      this.clear_data();
      this.islogin = 0;
    },
    clear_data() {
      window.localStorage.removeItem("rqrcodekey");
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 98%;
  height: 100%;
  // height: 100vh;
  margin: auto;
  padding: 0 1% 0 1%;
  background-size: cover;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-family: 微软雅黑;
  background: url(http://pay.inheart.cn/images/bg.jpg);
  background-size: cover;

  img{
    max-width: 100%;
  }

  .icon {
    width: 32px;
    height: 32px;
  }

  .wechatQrCode {
    text-align: center;
    .el-image {
      width: 200px;
      height: 200px;
      margin-bottom: 17px;
    }
    a {
      font-size: 14px;
      text-decoration: none;
      color: #576b95;
    }
    p {
      font-size: 16px;
      color: #333;
      text-align: center;
      letter-spacing: 1px;
      overflow: hidden;
      margin: 0;
    }
  }
  ::v-deep .el-input__inner {
    &:focus {
      border: 1px solid #4e83fd;
    }
  }

  ::v-deep .el-input--medium .el-input__inner {
    height: 40px;
    line-height: 40px;
  }

  .left-wrap {
    width: 50%;
    margin-bottom: 180px;

    .left-top {
      color: #fff;
      text-align: center;
      text-shadow: rgb(102, 102, 102) 3px 3px 3px;
      h1 {
        font-weight: 100;
        font-size: 32px;
        letter-spacing: 2px;
      }
      p {
        font-size: 20px;
        letter-spacing: 2px;
        margin: 10px 0 20px;
      }
    }

    .left-bottom {
      text-align: center;
      img {
        width: 40rem;
      }
    }

    .logo {
      display: flex;
      align-items: center;
      .title {
        color: #555;
        font-size: 20px;
        font-weight: 500;
        margin-left: 5px;
      }
    }
    .left-img {
      display: block;
      margin: auto;
      margin-top: 300px;
    }
  }

  .right-wrap {
    width: 50%;
    margin-bottom: 180px;
    
    .right-top {
      width: 100%;
      text-align: center;
      color: #fff;
      font-size: 20px;
      letter-spacing: 1px;
      margin-bottom: 26px;

      h3 {
        display: inline-block;
        margin: 0;
        font-size: 30px;
        font-weight: bold;
      }
    }

    .header {
      display: none;
    }

    .login-wrap {
      width: 450px;
      height: 440px;
      max-width: 100%;
      background: #EBF4FD;
      border-radius: 10px;
      overflow: hidden;
      margin: 0 auto;
      position: relative;
      
      .Scancode{
        width: 100%;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #A83F3F;
        margin: 30px 0 60px;
      }

      h3 {
        color: #555;
        font-size: 23px;
        text-align: center;
        font-weight: 500;
      }

      .input-label {
        color: #333;
        font-size: 14px;
        padding: 8px 0px;
        display: block;
      }
      .iconfont {
        color: #4791ff;
        padding-right: 5px;
      }
      .code {
        display: flex;
        justify-content: space-between;

        .el-input {
          flex: 1;
          margin-right: 20px;
        }

        img {
          width: 115px;
          height: 40px;
          cursor: pointer;
          border-radius: 5px;
          background: #f8f8f8 !important;
        }
      }

      .login-btn {
        width: 100%;
        height: 40px;
        border: 0;
        color: #fff;
        background: #4e83fd;
      }
    }
  }

  .login_bottom {
    color: #fff;
    font-size: 14px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 176px;
    text-align: center;
    letter-spacing: .5px;
    white-space: nowrap;
    font-family: '微软雅黑';

    .login_bottomtitle {
      line-height: 40px;
      font-size: 14px;
      margin: 26px 0 10px;
    }
    .login_bottomtitle img {
      padding-right: 8px;
      vertical-align: middle;
    }
    .login_bottommenu {
      font-size: 14px;
      margin-bottom: 12px;
      color: #fff;
    }
    .login_bottommenu a {
      color: #fac81b;
      font-size: 14px;
      margin: 0 10px;
      font-weight: 700;
      text-decoration: none;
    }

    .login_bottomcontent {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
    }
    .login_bottomcontent a {
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      font-weight: bold;
    }
    .login_bottomcontent img {
      vertical-align: text-bottom;
    }
    .login_bottomcontent .tel {
      padding-right: 10px;
      cursor: auto;
    }

    .login_bottomba {
      color: #fff;
    }
    .login_bottomba a {
      text-decoration: none;
    }
  }
}

@media only screen and (max-width: 800px){
  .left-wrap{
    display: none;
  }
  .right-wrap {
    width: 100%!important;
  }
}

// @media only screen and (max-width: $device-ipad-pro) {
//   .login {
//     width: 100%;
//     height: 100vh;

//     .left-wrap {
//       display: none;
//     }
//     .bg {
//       display: none;
//     }
//     .login_bottom {
//       display: none;
//     }
//     .right-wrap {
//       width: 100%;

//       .header {
//         display: flex;
//         align-items: center;
//         justify-content: center;
//         margin-top: 20vh;

//         h1 {
//           font-weight: 500;
//           margin-left: 15px;
//         }
//       }
//       .right-top {
//         h3 {
//           color: #333;
//           font-size: 28px;
//         }
//       }
//       .login-wrap {
//         width: 100%;
//         height: auto;
//         border-radius: 0;
//         position: relative;
//         box-shadow: none;

//         .form {
//           padding: 0px 30px;

//           h3 {
//             display: none;
//           }
//         }
//       }
//     }
//   }
// }

</style>
